<template>
	<view class="u-page">
		<u-subsection :list="['我的客户','拓展客户']" :current="current" @change="sectionChange"></u-subsection>
		<block v-if="current==1 && showlist">
			<view v-for="(item, index) in toker" :key="index">
				<u-cell :title="item.name" :isLink="true" @click="markertap({markerId:item.id});">
					<view slot="label">
						<text class="tag-info">{{item.province}}-{{item.city}}-{{item.district}}</text>
					</view>
					<view slot="value">
						<text class="tag-danger" v-if="item.status==1">待跟进</text>
						<text class="tag-success" v-if="item.status==2">待入驻</text>
						<text class="tag-fail" v-if="item.status==3">已拒绝</text>
					</view>
				</u-cell>
			</view>
			<u-empty v-if="toker.length==0" text="没有标注!" mode="search" marginTop="50"></u-empty>
			<view class="footer" style="width: 90%;left:40rpx;">
				<u-button customStyle="width:100%;" icon="close-circle-fill" @click="remap" text="返回地图" size="mini" type="success"></u-button>
			</view>
		</block>
		<block v-else>
			<map :style="'width: 100%; height: '+height+'px;'" @markertap="markertap" @regionchange="regionchange" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers">
				<cover-image class="kehu" src="/static/map/kehu.png" v-if="current==0"></cover-image>
				<cover-image class="genjin" src="/static/map/gj.png"  v-if="current==1"></cover-image>
			</map>	
			<view v-if="current==1" class="footer">
				<u-button customStyle="width:45%;" icon="pushpin-fill" @click="tapmap" text="标注位置" size="mini" type="success"></u-button>
				<u-button customStyle="width:45%;" icon="grid-fill" @click="tolist" text="列表模式" size="mini" type="primary"></u-button>
			</view>
		</block>
		<u-popup :show="showAddMarker" @close="showAddMarker=false" mode="center" :round="4" customStyle="width:90%;padding:20rpx;">
			<view class="form-item">
				<view class="form-title">商铺名称：</view>
				<view class="form-value">
					<input v-model="markerForm.name" placeholder="请输入商铺名称">
				</view>
			</view> 
			<view class="form-item">
				<view class="form-title">详细地址：</view>
				<view class="form-value">
					<input v-model="markerForm.address" placeholder="请输入地址,详细到门牌号">
				</view>
			</view>
			<view class="form-item">
				<view class="form-title">客户手机：</view>
				<view class="form-value">
					<input v-model="markerForm.mobile" placeholder="请输入客户手机号">
				</view>
			</view>
			<view class="form-item">
				<view class="form-title">客户意愿：</view>
				<view class="form-value">
					<radio-group @change="yiyuanChange" class="radiogroup">
						<label style="text-align: right;font-size: 12px;">
							<radio value="1" :checked="markerForm.yiyuan==1" color="#1296db" style="transform:scale(0.7);"/> 低
						</label>
						<label style="text-align: right;font-size: 12px;">
							<radio value="2" :checked="markerForm.yiyuan==2" color="#1296db" style="transform:scale(0.7);"/> 中
						</label>
						<label style="text-align: right;font-size: 12px;">
							<radio value="3" :checked="markerForm.yiyuan==3" color="#1296db" style="transform:scale(0.7);"/> 高
						</label>							
					</radio-group>
				</view>
			</view>
			<view class="form-item-history">
				<view class="form-title">拍摄门头：</view>
				<view class="form-value">
					<u-upload
						:fileList="markerForm.img"
						:sizeType="sizeType"
						@afterRead="afterRead"
						@delete="deletePic"
					>
					</u-upload>
				</view>
			</view>
			<view class="form-item" style="height: auto;line-height: 50rpx;">
				<view class="form-title">跟进状态：</view>
				<view class="form-value">
					<radio-group @change="genjinChange" class="radiogroup">
						<label style="text-align: right;font-size: 12px;">
							<radio value="1" :checked="markerForm.status==1" color="#1296db" style="transform:scale(0.7);"/>待跟进
						</label>
						<label style="text-align: right;font-size: 12px;">
							<radio value="2" :checked="markerForm.status==2" color="#1296db" style="transform:scale(0.7);"/>待入驻
						</label>
						<label style="text-align: right;font-size: 12px;">
							<radio value="3" :checked="markerForm.status==3" color="#1296db" style="transform:scale(0.7);"/>已拒绝
						</label>
						<label style="text-align: right;font-size: 12px;" v-if="markerForm.id">
							<radio value="4" :checked="markerForm.status==4" color="#1296db" style="transform:scale(0.7);"/>已入驻
						</label>
					</radio-group>
				</view>				
			</view>
			<view class="form-item-history" v-if="markerForm.history">
				<view class="form-title">跟进历史：</view>
				<view class="form-value">
					<view class="his" v-for="(item,index) in markerForm.history" :key="index">
						<text space="ensp">{{item.time}}  {{item.user}}  {{item.status | parseStatus}}</text>
						<text>备注：{{item.remark}}</text>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-title">跟进备注：</view>
				<view class="form-value">
					<input v-model="markerForm.remark" placeholder="请填写备注" type="text">
				</view>
			</view>
			<view class="submit">
				<u-button size="small" type="primary" @click="submit">提交</u-button>
				<u-button v-if="markerForm.id>0" customStyle="margin-top: 20rpx;" size="small" type="error" @click="deletemarker">删除</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {baseUrl,methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				height:'',
				sizeType:['compressed'],
				latitude: '26.6015',
				longitude: '106.62254',
				scale:14.5,
				countScale:14.5,
				markers:[],
				list:[],
				toker:[],
				current:0,
				showAddMarker:false,
				markerForm:'',
				showlist:false,
				rules:{
					name:{
						title:'店铺名称',
						rule:'require;length(2~20)',
						error:''
					},
					address:{
						title:'详细地址',
						rule:'require;length(5~50)',
						error:''
					},
					mobile:{
						title:'客户手机',
						rule:'require;mobile',
						error:''
					},
					yiyuan:{
						title:'客户意愿',
						rule:'require;',
						error:''
					},
					status:{
						title:'跟进状态',
						rule:'require;',
						error:''
					}
				}
			}
		},
		filters:{
			parseStatus:function(data){
				if(data==1)return '待跟进';
				if(data==2)return '待入驻';
				if(data==3)return '已拒绝';
			}
		},
		onLoad() {
			this.mylocat();
			uni.getSystemInfo({
				success:res=> {
					this.height = res.windowHeight;
				}
			});
			this.$get('admin/admin/mystore').then(res=>{
				this.list=res;
				this.formatMap();
			});
		},
		methods: {
			...methods,
			tolist:function(){
				this.showlist=true;
			},
			remap:function(){
				this.showlist=false;
			},
			deletemarker:function(){
				uni.showModal({
					content:'你确定要删除这个标注吗？',
					success: (e) => {
						if(e.confirm){
							this.$get('admin/admin/deltoker',{id:this.markerForm.id},true).then(res=>{
								this.showAddMarker=false;
								this.formatToker();
							});
						}
					}
				})
			},
			markertap:function(e){
				if(this.current==0){
					return;
				}
				let markerId=e.markerId;
				let toker='';
				for(let i=0;i<this.toker.length;i++){
					if(this.toker[i].id==markerId){
						toker=this.toker[i];
					}
				}
				if(!toker){
					return;
				}
				if(toker.img){
					toker.img=[{url:toker.img}];
				}
				this.markerForm=toker;
				this.showAddMarker=true;
			},
			deletePic:function(){
				this.markerForm.img=[];
			},
			afterRead:function(e){
				let file=e.file;	
				this.$uploadFile(file.url,res=>{
					this.markerForm.img=[{url:res.fullurl}];
				});
			},
			submit:function(){
				for(let rule in this.rules){
					if(!this.$validate(rule,this.markerForm)){
						this.$msg(this.rules[rule].error);
						return;
					}
				}
				this.$post('admin/admin/toker',this.markerForm,true).then(res=>{
					this.showAddMarker=false;
					this.formatToker();
				});
			},
			genjinChange:function(e){
				this.markerForm.status=parseInt(e.detail.value);
			},
			yiyuanChange:function(e){
				this.markerForm.yiyuan=parseInt(e.detail.value);
			},
			tapmap:function(){
				this.markerForm={
				   id:0,
				   name:'',
				   mobile:'',
				   yiyuan:'',
				   address:'',
				   remark:'',
				   img:[],
				   latitude:this.latitude,
				   longitude:this.longitude,
				   status:''
				};
				this.showAddMarker=true;
			},
			mylocat:function(){
				let that=this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						that.longitude=res.longitude;
						that.latitude=res.latitude;	
						if(that.current==1){
							that.formatToker();
						}
					},
					fail(e) {
						that.longitude='106.62254';
						that.latitude='26.6015';
						if(that.current==1){
							that.formatToker();
						}
					}
				});
			},
			sectionChange:function(e){
				this.current=e;
				if(e==0){
					this.scale=14.5;
					this.countScale=14.5;
					this.formatMap();
				}
				if(e==1){
					this.scale=18;
					this.countScale=18;
					this.mylocat();
				}
			},
			formatToker:function(refresh=true){
				if(refresh){
					this.$get('admin/admin/tokerlist').then(res=>{
						res=res.map(t=>{
							t.history=JSON.parse(t.history.content);
							t.remark='';
							return t;
						}); 
						this.toker=res;
						this.parseToker();
					});		
				}else{
					this.parseToker();
				}
			},
			parseToker:function(){
				let scale=this.countScale;
				let markers = [{
					id: 1,
					latitude: parseFloat(this.latitude),
					longitude: parseFloat(this.longitude),
					width:26,
					height:36
				}];
				let res=this.toker;
				for(let i=0;i<res.length;i++){
					let iconPath,color;
					if(res[i].status==1){
						iconPath = '/static/map/x3.png';
						color='#c70c0f';			
					}	
					if(res[i].status==2){
						iconPath = '/static/map/x1.png';
						color='#12b417';
					}
					if(res[i].status==3){
						iconPath = '/static/map/x2.png';
						color='#a6a6a6';
					}
					let marker={
						id:res[i].id,
						latitude: parseFloat(res[i].latitude),
						longitude: parseFloat(res[i].longitude),
						iconPath: iconPath
					}
					if(scale>=16){
						marker.label={
							content:res[i].name,
							fontSize:12,
							color:color,
							anchorX:0,
							anchorY:-40,
							textAlign:'center'
						};
						marker.width=26;
						marker.height=26;
					}else{
						marker.width=parseInt(1.8*scale);
						marker.height=parseInt(1.8*scale);
					}	
					markers.push(marker);			
				}
				this.markers=markers;
			},
			formatMap:function(){
				let scale=this.countScale;
				let res=this.list;
				let markers = [];
				for (let i = 0; i < res.length; i++) {
					let iconPath,color;		
					if(res[i].isnew===1){
						iconPath = '/static/map/x1.png';
						color='#12b417';	
					}	
					if(res[i].isnew===0){
						iconPath = '/static/map/x3.png';
						color='#c70c0f';	
					}	
					if(!res[i].latitude || !res[i].longitude){
						continue;
					}
					let marker = {
						id: res[i].id,
						latitude: parseFloat(res[i].latitude),
						longitude: parseFloat(res[i].longitude),					
						iconPath: iconPath					
					};
					if(scale>=16){
						marker.label={
							content:res[i].name,
							fontSize:12,
							color:color,
							anchorX:0,
							anchorY:-40,
							textAlign:'center'
						};
						marker.width=26;
						marker.height=26;
					}else{
						marker.width=parseInt(1.8*scale);
						marker.height=parseInt(1.8*scale);
					}
					markers.push(marker);
				}
				this.markers = markers;
			},
			regionchange:function(e){
				if(this.current==0 && e.type=='end'){
					this.countScale=e.detail.scale;
					this.formatMap();
				}
				if(this.current==1 && e.type=='end'){
					this.countScale=e.detail.scale;
					this.formatToker(false);
				}
			}
		}
	}
</script>

<style lang="scss">
	.kehu{
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		width: 96px;
		height: 80px;
		border-radius: 10rpx;
	}
	.genjin{
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		width: 124rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.footer{
		position: fixed;
		bottom: 20rpx;
		left:20rpx;
		width: 50%;
		display: flex;
	}
	.form-item,.form-item-history {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 12px;
		input{
			font-size: 12px;
		}
		.form-title {
			width: 130rpx;
			text-align: right;
		}
		.form-value {
			width: 70%;
			color: #acacac;
			padding-left: 20rpx;
		}
		.radiogroup{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.his{
			display: flex;
			flex-direction: column;
			margin-bottom: 10rpx;
		}
	}
	.form-item{
		height: 60rpx;
		line-height: 60rpx;
	}
	.radioType{
		position: fixed;
		left: 30rpx;
		bottom:30rpx;
		z-index: 99999;
		background-color: rgba(221, 221, 221, 0.7);
		padding:10rpx 20rpx;
		border-radius: 14rpx;
	}
</style>